<template>
    <div>
        <div class="  inline-block rounded-full mx-2 align-middle" :style=styles />
        <div class="inline-block ">{{ value }}</div>
    </div>
</template>

<script lang='ts' setup>


import {computed, CSSProperties} from "vue";
import {addUnit} from "@/utils/util";


interface RoundInterface {
    value?: string
    background?: string
    size?: string
}

const props = withDefaults(defineProps<RoundInterface>(), {
    background: '#f63131',
    value: '',
    size: '7'
})


/**
 * 样式
 */
const styles = computed<CSSProperties>(() => {
    return {
        background: addUnit(props.background),
        width: addUnit(props.size),
        height: addUnit(props.size),
    }
})

</script>

